<template>
  <a-directory-tree
    autoExpandParent
    v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys"
    multiple
    @select="selectedHandler"
    :tree-data="treeData"
  />
</template>

<script lang="ts" setup>
  import type { TreeProps } from "ant-design-vue"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import { ref, watch } from "vue"
  import { TreeData } from "./type"
  const activeKey = ref("-1")
  const rowId = ref("")
  //暴露内部方法
  const emit = defineEmits(["update:selectedKeys"])
  const expandedKeys = ref<string[]>([])
  const selectedKeys = ref<string[]>([])
  const props = defineProps({
    treeData: { type: Array<TreeData>, default: [] },
    selectedKeys: { type: Array, default: [] },
  })
  const treeData = ref<TreeData[]>([])
  watch(
    () => props.treeData,
    async (val) => {
      try {
        if (val) {
          treeData.value = val
        }
      } catch (err) {
        console.error(err)
      }
    },
    { deep: true, immediate: true }
  )
  function selectedHandler(selectedKeys) {
    emit("update:selectedKeys", selectedKeys)
    console.log("selectedKeys: ", selectedKeys)
  }
</script>
